import React, { memo } from "react";
import PropTypes from "prop-types";//校验组件传递参数

import { HeaderWrapper } from "./style";
import { NavLink } from "react-router-dom";


const CJXThemeHeaderRcm = memo(function (props) {

    let {title, keywords, url} = props;
    const linkTo = url.indexOf("#") !== -1 ? url.slice(url.indexOf("#")+1) : url;


    return (
        <HeaderWrapper className="sprite_02">
            <div className="left">
                <h3 className="title">{title}</h3>
                <div className="keyword">
                    {
                        keywords.map((item, index) => {
                            return (
                                <div className="item" key={item}>
                                    <NavLink to={{
                                        pathname: linkTo,
                                        state: {cat: item},
                                        search: `?cat=${item}`
                                    }}>{item}</NavLink>
                                    <span className="divider">|</span>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <div className="right">
                <NavLink to={url}>更多</NavLink>
                <i className="icon sprite_02"></i>
            </div>
        </HeaderWrapper>
    )
})

//校验组件传递参数
CJXThemeHeaderRcm.propTypes = {
    title: PropTypes.string.isRequired,//设置参数类型 和 必传
    keywords: PropTypes.array,
    url: PropTypes.string,
}
CJXThemeHeaderRcm.defaultProps = {
    keywords: [],
    url: "/#/discover/ranking"
}




export default CJXThemeHeaderRcm